<template>
  <div class="page-info">
    <div class="button" style="margin: 10px;">
      <a-space>
        <a-button type="primary" @click="editCarouselBannerInfo('add')">新增</a-button>
        <a-button type="primary" danger @click="batchDelCarouselBannerInfo">删除</a-button>
      </a-space>
    </div>
    <div class="content">
      <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :row-key="(record) => record.id"
        :pagination="pagination" @change="handleTableChange" :scroll="{ x: 1100, y: 550 }"
        :row-selection="rowSelection">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="primary" size="small"
                @click="editCarouselBannerInfo('update', record.id)">编辑</a-button>
              <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delCarouselBannerInfo(record.id)"
                @cancel="cancel">
                <a-button type="primary" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
            <span></span>
          </template>
          <template v-else-if="column.key === 'fileId'">
            <a-image v-if="record?.fileInfoVo?.preUrl" :width="150" :src="record?.fileInfoVo?.preUrl" />
          </template>
        </template>
      </a-table>
      <CarouselBannerInfoDetail ref="editInfo" :open="visible" :modelInfo="modelInfo" @handleOk="handleOk"
        @handleCancel="handleCancel"></CarouselBannerInfoDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  SearchInfo,
  pagination,
  columns,
  DataItem,
  ModelInfo,
  pageInfo,
} from "./carouselBannerInfoListTs";
import { getCarouselBannerInfoPage, deleteCarouselBannerInfo } from "@/api/commonInfo/carouselBannerInfo/carouselBannerInfoTs";
import { message } from "ant-design-vue";
import { getDictList } from "@/api/commonInfo/dictInfo/dictInfoTs";
import { dictInfo } from "@/views/commonInfo/dictInfo/dictInfoListTs";

let rowIds = [] as any;

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    rowIds = selectedRowKeys;
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const labelMap = ref<any>(
  {
    fileId: { name: 'fileId', label: '文件ID，关联存储的轮播图文件' },
    title: { name: 'title', label: '轮播图标题' },
    description: { name: 'description', label: '轮播图描述' },
    linkUrl: { name: 'linkUrl', label: '跳转链接' },
    sortOrder: { name: 'sortOrder', label: '排序顺序' },
    status: { name: 'status', label: '状态: 0=禁用, 1=启用' },
  });

let searchInfo = ref<SearchInfo>({});

let statusList = ref<dictInfo[]>([]);

const getDictInfoList = (): void => {
  getDictList("is_valid").then((res) => {
    if (res.code == "200") {
      statusList.value = res.data.filter(
        (item: { belongTo: string }) => item.belongTo == "is_valid"
      );
    } else {
      message.error((res && res.message) || "查询列表失败！");
    }
  });
}

const cancelQuery = (): void => {
  searchInfo.value = {};
}

const query = (): void => {
  getCarouselBannerInfoListPage(searchInfo.value, pagination.value);
}

const handleTableChange = (pagination): void => {
  getCarouselBannerInfoListPage(searchInfo.value, pagination);
}

const delCarouselBannerInfo = (ids: string): void => {
  deleteCarouselBannerInfo(ids).then((res) => {
    if (res.code == "200") {
      message.success((res && "删除" + res.message) || "删除成功！", 3);
      getCarouselBannerInfoListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || "删除失败！", 3);
    }
  });
}

const batchDelCarouselBannerInfo = (): void => {
  let ids = "";
  if (rowIds && rowIds.length > 0) {
    rowIds.forEach((item: string) => {
      ids += item + ",";
    });
    ids = ids.substring(0, ids.length - 1);
  } else {
    message.warning("请先选择数据！", 3);
    return;
  }
  delCarouselBannerInfo(ids);
}

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
  console.log(e);
}

const getCarouselBannerInfoListPage = (param: SearchInfo, cur: pageInfo): void => {
  loading.value = true;
  getCarouselBannerInfoPage(param, cur.current, cur.pageSize)
    .then((res) => {
      if (res.code == "200") {
        dataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.pageSize = res.data.size;
        pagination.value.total = res.data.total;
      } else {
        message.error((res && res.message) || "查询列表失败！");
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const init = (): void => {
  getDictInfoList();
  //获取展示轮播图表页面数据
  getCarouselBannerInfoListPage(searchInfo.value, pagination.value);
}

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editCarouselBannerInfo = (type: string, id?: number): void => {
  if (type == "add") {
    modelInfo.value.title = "新增明细";
    modelInfo.value.id = undefined;
  } else if (type == "update") {
    modelInfo.value.title = "修改明细";
    modelInfo.value.id = id;
  }
  modelInfo.value.confirmLoading = true;
  visible.value = true;
}

const handleOk = (v: boolean): void => {
  visible.value = v;
  getCarouselBannerInfoListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
  visible.value = v;
};
</script>
<style lang="scss" scoped></style>
